<template> 
    <div class="finput">
        <input type="text" :value="modelValue" @input="input" :placeholder="placeholder" :disabled="disabled" :clearable="clearable">
        <div class="off" :style="clearStyle" @click="clearInput">
            <i>⊗</i>
        </div> 
    </div>   
</template> 
<script setup>
import {computed} from 'vue'  
    const emit = defineEmits(['update:modelValue'])
    const props = defineProps({
        modelValue:String|Number,
        placeholder:String,
        disabled:Boolean,
        clearable:Boolean,
        
    })
    const input = (e)=>{ 
        emit('update:modelValue',e.target.value)
    }  
    const clearStyle = computed(()=>{
        return [ 
            {
                'display':props.clearable && props.modelValue ? 'block' : 'none'
            }
        ]
    })
    const clearInput = () =>{
        emit('update:modelValue','')
    }

</script>  
<style lang='scss' scoped>
    .finput{ 
        width: 180px; 
        position: relative;
        input{
            border: none;
            width: 100%;
            border-radius: 5px;
            border:1px solid #eee;
            height: 40px;
            color: #606266;
            line-height: 40px;
            padding: 0 15px;
            padding-right: 25px;
            font-size: 15px; 
            transition: all .15s ease;
            &:focus {
                border: 1px solid #409eff;
            }
        } 
        .off{ 
            width: 20px;
            height: 100%;
            text-align: center;
            line-height: 35px;
            position: absolute;
            right:5px;
            top: 0;
            cursor: pointer;
            // display: none;
            i{
                font-style:normal;
                font-size: 15px;
                color: #c0c4cc;
            }
        }
    }
</style>